cqjs.component('pageView', {
    // 渲染方法
    render() {
        console.log(this)
        const tpl = window.meta.views.form.arch
        //const tpl = `<span>abcd</span>`;
        return Vue.compile(tpl).render.call(this);
    },
    data() {
        return {
            count: 1
        }
    },
    methods: {
        run1() {
            this.count++;
            console.log('a.run1')
        },
        run() {
            this.count++;
            console.log('a.run')
        }
    },
    mounted() {
        console.log(this)
    }
});

async function loadView() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                resource: '<script src="./module.js"></script><script src="./module2.js"></script>',
                fields: {},
                views: {
                    form: {
                        arch: '<form><toolbar><button type="button" @click="run">OK</button><span>{{count}}</span></toolbar><field name="test"/></form>'
                    }
                }
            });
        }, 300);
    });
}

// 加载资源
function loadResource(node) {
    return new Promise((resolve, reject) => {
        const dom = document.createElement(node.tagName);
        for (const attr of node.attributes) {
            dom.setAttribute(attr.name, attr.value);
        }
        dom.onload = resolve;
        dom.onerror = reject;
        document.querySelector("head").appendChild(dom);
    });
}

(async function () {
    const view = await loadView();
    console.log(view);
    if (view.resource) {
        const xml = cqjs.utils.parseXML('<root>' + view.resource + '</root>');
        const waits = [];
        for (const item of xml.querySelector("root").children) {
            waits.push(loadResource(item));
        }
        await Promise.all(waits);
    }
    cqjs.buildComponents();
    window.meta = view;
    new Vue({
        el: '#app',
        template: '<pageView/>'
    });
})();